<template>
  <div>
    <Child aa="bb" :cc="'dd'" class="xxx" :xx="'yy'" @click="test" @zzz="test"></Child>
    <h2>自定义带Hover提示的按钮（对组件进行二次封装）</h2>

    <el-button type="primary" icon="el-icon-plus" size="mini"></el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
    <el-button type="warning" icon="el-icon-edit" size="mini"></el-button>
    <br>
    <HintButton type="primary" icon="el-icon-plus" size="mini" title="添加"></HintButton>
    <HintButton type="danger" icon="el-icon-delete" size="mini" title="删除"></HintButton>
    <HintButton type="warning" icon="el-icon-edit" size="mini" title="修改"></HintButton>
    <br>
<!--  el-button 不能添加双击事件,因为底层只封装了单击事件 双击事件不能直接添加,可以添加.native转成原生的dom事件进行双击  -->
    <el-button type="primary" icon="el-icon-plus" size="mini" @click="test">测试点击事件</el-button>
    <el-button type="success" icon="el-icon-plus" size="mini" @dblclick.native="test">测试双击事件</el-button></div>
</template>

<script type="text/ecmascript-6">
import Child from "@/pages/Communication/AttrsListenersTest/Child";
import HintButton from "@/pages/Communication/AttrsListenersTest/HintButton";
export default {
  name: 'AttrsListenersTest',
  components: {
    Child,
    HintButton
  },
  methods: {
    test() {
      console.log(456)
    }
  },
}
</script>
